<template>
	<div @click="close()">
		<div :class="on ? 'body-minHeight-on' : ''"></div>
		<span class="mes-img" @click.stop="show"><img src="../../assets/images/more.png" alt=""/></span>
		<!-- 头部下拉菜单 -->
		<div class="head-select" id="head-select" @click.stop="show" v-if="on">
			<router-link to="/index">
				<p class="sel-p">
					<span class="item">
						<i class="item-img"><img src="../../assets/images/head-img-index.png" alt=""/></i>
						<span class="item-txt">首&#8195;&#8195;页</span>
					</span>
				</p>
			</router-link>
			<router-link to="/category">
				<p class="sel-p">
					<span class="item">
						<i class="item-img"><img src="../../assets/images/head-img-category.png" alt=""/></i>
						<span class="item-txt">分类搜索</span>
					</span>
				</p>
			</router-link>
			<router-link to="/cart">
				<p class="sel-p">
					<span class="item">
						<i class="item-img"><img src="../../assets/images/head-img-cart.png" alt=""/></i>
						<span class="item-txt">购&ensp;物&ensp;车</span>
					</span>
				</p>
			</router-link>
			<router-link to="/my">
				<p class="sel-p">
					<span class="item">
						<i class="item-img"><img src="../../assets/images/head-img-my.png" alt=""/></i>
						<span class="item-txt">个人中心</span>
					</span>
				</p>
			</router-link>
			<!-- <router-link :to="{ path: '/serviceChat', query: { consultId: 0, consultType: 'other', shopId: 0 } }">
				<p class="sel-p">
					<span class="item">
						<i class="item-img"><img src="../../assets/images/head-img-service.png" alt=""/></i>
						<span class="item-txt">联系客服</span>
					</span>
				</p>
			</router-link> -->
			<!-- <router-link to="/history">
				<p class="sel-p">
					<span class="item">
						<i class="item-img"><img src="../../assets/images/head-img-history.png" alt=""/></i>
						<span class="item-txt">浏览记录</span>
					</span>
				</p>
			</router-link> -->
		</div>
		<!-- /头部下拉菜单 -->
	</div>
</template>

<script>
export default {
	data() {
		return {
			on: false
		};
	},	
	methods: {
		//点击页面后头部下拉菜单
		show() {
			this.on = !this.on;
		},
		close() {
			this.on = false;
		}
	}
};
</script>

<style>
@import '../../assets/css/common.css';
/* 遮罩层 */
.body-minHeight-on {
	position: fixed;
	left: 0;
	/* top: 44px; */
	width: 100%;
	max-width: 750px;
	height: 100%;
	background: transparent;
	z-index: 99;
}
</style>
